<template>
  <el-result title="404" sub-title="Sorry, request error" v-if="id == null || article == null">
    <template #icon>
      <el-image
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      />
    </template>
    <template #extra>
      <el-button type="primary">Back</el-button>
    </template>
  </el-result>
  <div class="article" v-else>
    <div>
      <div class="title">
        {{ article.title }}
      </div>
      <div class="sub">
        <el-space :size="10" spacer="|">
          <span>{{ article.created }}</span>
          <span>{{ article.author?.username }}</span>
          <el-tag class="ml-2" type="info" v-for="(tag, index) in article.tags" :key="index">{{ tag }}</el-tag>
        </el-space>
      </div>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <label v-html="article.body_html"></label>
      <!-- <div class="toc" v-html="article.toc_html">toc</div> -->
      <!-- <div class="toc">toc</div> -->
      <div class="nav">
        <el-button link>
            <router-link :to="'/detail/' + article.id">
              上一篇
            </router-link>
          </el-button>
          <el-button link>
            <router-link :to="'/detail/' + article.id">
              下一篇
            </router-link>
          </el-button>
      </div>
      <el-affix :offset="0" style="float: right; width: 30%">toc</el-affix>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

import { Article } from '@/types/index'
import { getArticle } from '@/api/index'

const route = useRoute()
const id = route.params.id as string;
const article = ref<Article|null>(null)

onMounted(async () => {
  if (id !== null && id !== undefined) {
    const response = await getArticle(Number(id))
    article.value = response
  }
})

</script>

<style scoped>
.article {
  padding: 8px;
  width: 100%;
  /* display: block; */
  /* flex-direction: row; */
}

.article .title {
  padding: 8px 16px;
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
}

.article .sub {
  padding: 8px 16px;
  width: 100%;
  font-size: 0.9rem;
}

.article label {
  width: 100%;
  padding: 8px 16px;
  min-height: 100%;
}

.article .nav {
  width: 100%;
  padding: 8px 16px;
}
</style>
